<template>
  <div v-if="reportShow">
    <reportCard @add-info="handleAddInfo"/>
  </div>
</template>

<script setup>
import reportCard from '../components/reportCard.vue'
import { ref, watch, onMounted } from 'vue'
import { storeToRefs } from 'pinia';
import { useMap } from '@/stores/useMap.js';
import { useUserStore } from '@/stores/user';
const { reportShow} = storeToRefs(useUserStore());
const { map } = storeToRefs(useMap());
const reportData = ref([])
const handleAddInfo = (info) => {
  reportData.value.push(info)  
}
const getInfo = ()=>{
  const infoLists = JSON.parse(localStorage.getItem('infoLists') || '[]')
  reportData.value = infoLists
}
const handleMapClick = (e) => {
  reportShow.value = true
}
watch(
  reportData,
  () => {
    localStorage.setItem('infoLists', JSON.stringify(reportData.value))
  },
  { deep: true }
)
onMounted(() => {
  getInfo()
})

watch(
  () => map.value,
  newMap => {
    if (newMap) {
      try {
        newMap.on('click', handleMapClick);
      } catch (error) {
        console.error('初始化地图交互失败:', error);
      }
    }
  },
  { immediate: true }
);
</script>

<style scoped></style>